<!-- 拖拽拉长组件 @Author:wuyp -->
<template>
    <div id="dragDiv" class="dragDivCls dragDivFontCls">
        <vue-draggable-resizable class="dragCls" :style="styleStr"
            :unitw="unitw"
            :w="boxWidth" :h="boxHeight" :minw="minWidth" :minh="minHeight"
            :active="active" :draggable="draggable" :resizable="resizable"
            :x="x" :y="y" :z="z" :handles="handles" :axis="axis" :grid="grid"
            :parent="parent" :parentSelector="parentSelector"
            :is-conflict-check="isConflictCheck" :snap="snap" :snap-tolerance="snapTolerance"
            :dragHandle="dragHandle" :dragCancel="dragCancel"
            :maximize="maximize" @activated="onActivated" @deactivated="onDeactivated"
            @resizing="onResizing" @resizestop="onResizstop" @dragging="onDragging"
            @dragstop="onDragstop">
            {{ content }}
            <!--
            <div v-if="new Date(date).valueOf() > new Date().valueOf()" class="delDiv"><i class="el-icon-close" style="float: right" @click="delBox"></i></div>  
            -->
        </vue-draggable-resizable>
    </div>

</template>

<script>
import VueDraggableResizable from '@/components/DragResize/VueDragResize/VueDraggableResizable'

export default {
  name: 'DragResize',
  components: {
    VueDraggableResizable
  },
  props: {
    content: {
      type: String,
      default () {
        return ''
      }
    },
    backgroundcolor: {
      type: String,
      default () {
        return 'rgb(255,255,255)'
      }
    },
    unitw: {// 元素单位宽度，用于伸缩时宽度自适应,0表示未设置单位宽度
      type: Number,
      default: 0
    },
    width: {// 初始宽度
      type: [String, Number],
      default () {
        return 50
      }
    },
    height: {// 初始高度
      type: [String, Number],
      default () {
        return 30
      }
    },
    minw: {// 最小宽度
      type: [String, Number],
      default () {
        return 10
      }
    },
    minh: {// 最小高度
      type: [String, Number],
      default () {
        return 10
      }
    },
    active: {// 是否处于活动状态
      type: Boolean,
      default () { return false }
    },
    draggable: {// 是否可拖动
      type: Boolean,
      default () { return true }
    },
    resizable: {// 是否可调整大小
      type: Boolean,
      default () { return true }
    },
    x: {// 初始x位置
      type: Number,
      default () { return 0 }
    },
    y: {// 初始y位置
      type: Number,
      default () { return 0 }
    },
    z: {// 元素的zIndex
      type: [Number, String],
      default () { return 'auto' }
    },
    axis: {// 元素可拖动的轴-->可为x，y或both
      type: String,
      default () { return 'both' }
    },
    handles: {// 句柄数组--> 用于限制元素大小调整（分别为‘左上角’、‘中上方’、‘右上角’、‘右中方’、‘右下角’、‘下中方’、‘左下方’、‘左中方’）
      type: Array,
      default () { return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'] }
    },
    grid: {// 捕捉元素的网格
      type: Array,
      default () { return [1, 1] }
    },
    parent: {// 是否限制元素的移动区域为父元素
      type: Boolean,
      default () { return false }
    },
    parentSelector: {// parent选择器：用于控制组件移动区域,当parent=true时该属性才生效
      type: String,
      default () { return null }
    },
    dragHandle: {// 拖动组件的选择器
      type: String,
      default () { return '' }
    },
    dragCancel: {// 阻止拖动初始化的选择器
      type: String,
      default () { return '' }
    },
    maximize: {// 双击时是否填充父级区域
      type: Boolean,
      default () { return false }
    },
    value: {
      type: Object,
      default () {
        return {}
      }
    },
    isConflictCheck: {// 定义组件是否开启冲突检测
      type: Boolean, default: false
    },
    snap: {// 是否开启元素对齐
      type: Boolean, default: false
    },
    snapTolerance: {// 当调用对齐时，用来设置组件与组件之间的对齐距离，以像素为单位
      type: Number,
      default: 5,
      validator: function (val) {
        return typeof val === 'number'
      }
    }
    // date: {
    //   type: [Date, String]
    // }
  },
  data () {
    return {
    }
  },
  methods: {
    onActivated: function () { // 单击组件时调用，以显示句柄。
      // console.log('onActivated...')
      this.$emit('activated', this.value)
    },
    onDeactivated: function () { // 单击组件外的任何位置时调用，以便停用
      // console.log('onDeactivated...')
      this.$emit('deactivated', this.value)
    },
    onResizing: function () { // 调整大小时调用
      // console.log('onResizing...')
      this.$emit('resizing', this.value)
    },
    onResizstop: function () { // 停止调整大小时调用
      // console.log('onResizstop...')
      this.$emit('resizstop', this.value)
    },
    onDragging: function () { // 拖动组件时调用
      // console.log('onDragging...')
      this.$emit('dragging', this.value)
    },
    onDragstop: function () { // 停止拖动时调用
      // console.log('onDragstop...')
      this.$emit('dragstop', this.value)
    },
    delBox () {
      this.$emit('closeBox')
    }
  },
  computed: {
    boxWidth: function () {
      var bw = 0
      if (parseInt(this.width) !== 'NaN' && parseInt(this.width) > 0) {
        bw = parseInt(this.width)
      }
      return bw
    },
    boxHeight: function () {
      var bh = 0
      if (parseInt(this.height) !== 'NaN' && parseInt(this.height) > 0) {
        bh = parseInt(this.height)
      }
      return bh
    },
    minWidth: function () {
      var mw = 0
      if (parseInt(this.minw) !== 'NaN' && parseInt(this.minw) > 0) {
        mw = parseInt(this.minw)
      }
      return mw
    },
    minHeight: function () {
      var mh = 0
      if (parseInt(this.minh) !== 'NaN' && parseInt(this.minh) > 0) {
        mh = parseInt(this.minh)
      }
      return mh
    },
    styleStr: function () {
      let style = ''
      // 背景色
      if (this.backgroundcolor !== null && this.backgroundcolor !== '' && this.backgroundcolor !== 'undefined') {
        style += 'background-color: ' + this.backgroundcolor + ';'
      }
      return style
    }
  },
  created () {
  }
}
</script>

<style scope>
.dragDivCls {
  position: relative;
}
.dragCls {
  /* border-radius: 0.8rem; */
  /* 高度及宽度自适应 */
 /* height: auto!important;*/
}
.dragDivFontCls {
  font-family: '微软雅黑';
  font-size: 14px;
  text-align: center;
  line-height: 2;
  font-weight: 500;
}
/*
.delDiv {
  width: 14px;
  height: 14px;
  float: right;
}
*/
.delDiv:hover{
  background:cornflowerblue;
  cursor: pointer;
}
</style>
